<template>
    <div class="dialog-content">
      <p class="instruction">点击红色文字，选择近义词即可替换</p>
      <div class="custom-textarea">
        <span v-for="(item, index) in textItems" :key="index">
          <span v-if="item.type === 'normal'">{{ item.text }}</span>
          <span v-else class="clickable-word" @click="handleWordClick(item)">{{ item.text }}</span>
        </span>
      </div>
      <div class="word-count">
        {{ textContent.length }} / 8000
      </div>
    </div>
    <div style="text-align: center; margin-top: 20px;">
      <span class="dialog-footer">
        <el-button @click="restoreDefault">恢复默认</el-button>
        <el-button type="primary" @click="confirmChanges">
          确认使用
        </el-button>
      </span>
    </div>
  
    <el-dialog v-model="editDialogVisible" title="选择近义词" width="30%">
      <div class="word-options">
        <el-button 
          v-for="option in wordOptions" 
          :key="option" 
          :class="{ 'selected': editingWord === option }"
          @click="selectWord(option)"
        >
          {{ option }}
        </el-button>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmEdit">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref, computed, defineProps, defineEmits } from 'vue'
  
  const props = defineProps({
    msg: {
      type: String,
      default: ''
    }
  })
  
  const dialogVisible = ref(true)
  const textContent = ref(props.msg)
  const editDialogVisible = ref(false)
  const editingWord = ref('')
  const editingIndex = ref(-1)
  const initialContent = ref(props.msg) // 保存初始内容
  const emit = defineEmits(['textUpdated'])
  
  const highlightWords = ['同父异母', '苹果']
  // 自定义选项
  const wordOptions = ref(['同父异母', '同父同母', '同母异父', '异父异母'])
  
  const textItems = computed(() => {
    const items = []
    let lastIndex = 0
    const regex = new RegExp(`(${highlightWords.join('|')})`, 'g')
    
    textContent.value.replace(regex, (match, word, index) => {
      if (index > lastIndex) {
        items.push({ type: 'normal', text: textContent.value.slice(lastIndex, index) })
      }
      items.push({ type: 'highlight', text: word })
      lastIndex = index + word.length
    })
  
    if (lastIndex < textContent.value.length) {
      items.push({ type: 'normal', text: textContent.value.slice(lastIndex) })
    }
  
    return items
  })
  
  const handleWordClick = (item) => {
    editingWord.value = item.text
    editingIndex.value = textItems.value.indexOf(item)
    editDialogVisible.value = true
  }
  const selectWord = (word) => {
    editingWord.value = word
  }
  const confirmEdit = () => {
    if (editingIndex.value !== -1) {
      const newItems = [...textItems.value]
      newItems[editingIndex.value] = { type: 'highlight', text: editingWord.value }
      textContent.value = newItems.map(item => item.text).join('')
    }
    editDialogVisible.value = false
  }
  
  const confirmChanges = () => {
    console.log('确认使用:', textContent.value)
    emit('textUpdated', textContent.value)
    dialogVisible.value = false
  }
  const restoreDefault = () => {
    textContent.value = initialContent.value // 恢复到初始内容
    console.log('恢复默认:', textContent.value)
  
  }
  
  
  
  </script>
  
  <style scoped>
  .dialog-content {
    position: relative;
  }
  
  .instruction {
    margin-bottom: 10px;
    color: #909399;
  }
  
  .word-count {
    position: absolute;
    bottom: 5px;
    right: 15px;
    font-size: 12px;
    color: #909399;
  }
  
  .custom-textarea {
    color: black;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 10px;
    min-height: 300px;
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  
  .clickable-word {
    color: #c45656;
    cursor: pointer;
  }
  .word-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  
  .word-options .el-button {
    margin: 5px;
  }
  
  .word-options .el-button.selected {
    background-color: #409EFF;
    color: white;
  }
  </style> 